<template>
	<view class="notice_bg">
		<view class="bar-swiper" v-if="alertList.length == 1">
			<view v-for="(item, index) in alertList" :key="index" style="height: 100%;">
				<view class="swiper-item" @tap="scrollmesge(item)">

					<view class="item_box">
						<u-image :src="noticeImg" width="16" height="16" style="margin-right: 5px;"></u-image>
						{{ item.bedid + '床 '+ item.title }}
					</view>
					<view class="bottom-text">
						<text>请点击查看</text>
						<u-image :src="item.remark ? item.remark.replace(/[\r\n]/g, '') :'/static/img/CallAlarm.jpg'"
							width="80" height="80" class="sys_img" mode="scaleToFill"></u-image>
					</view>

				</view>
			</view>
		</view>
		<swiper autoplay="true" vertical="true" circular interval="3000" class="bar-swiper" v-else>
			<swiper-item v-for="(item, index) in alertList" :key="index">
				<view class="swiper-item"  @tap="scrollmesge(item)">

					<view class="item_box">
						<u-image :src="noticeImg" width="16" height="16" style="margin-right: 5px;"></u-image>
						{{ item.bedid + '床 '+ item.title }}
					</view>
					<view class="bottom-text">
						<text>请点击查看</text>
						<u-image :src="item.remark ? item.remark.replace(/[\r\n]/g, '') :'/static/img/CallAlarm.jpg'"
							width="80" height="80" class="sys_img" mode="scaleToFill"></u-image>
					</view>

				</view>

			</swiper-item>
		</swiper>


		<u-button v-if="alertList.length>0" type="primary" text="一键清除" class="btn1" style="width: 24%;height: 25px;"
			color="#FF6E91" @tap="canceScroll"></u-button>

	</view>
</template>
<script>
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				noticeImg: require("@/static/img/NoticeAnnouncement.png"),
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'passObj', 'scanningArray', 'gifArray', 'notifyObject']),

			alertList() {
		
				
				let sysArr = Object.values(this.notifyObject['iv_sys'])
				let ptcall = Object.values(this.notifyObject['pt_callsys'])
				let arletList = [...sysArr, ...ptcall].sort((a, b) => {
					return a.modifydate < b.modifydate ? 1 : -1
				})

				this.set_alertList(arletList)
				return arletList



			}
		},

		methods: {
			...mapMutations('user', ['set_gifArray', 'set_messageShow', 'set_alertList', 'set_NOTIFY']),

			// 点击通告栏
			scrollmesge(val) {
				console.log('点击了');
				this.set_gifArray(val)
				this.set_messageShow(true)
			},
			canceScroll() {

				try {

					for (let i = 0; i < this.alertList.length; i++) {
						uni.request({
							url: 'http://20.21.9.38:8022/smartcare/deviceOpt/optDevice', //接口地址。url
							method: "post", //传输类型
							data: {
								iconCode: this.alertList[i]?.iconCode,
								subType: this.alertList[i]?.title == '呼叫报警' ? 'pt_callsys' : 'iv_sys',
								opt: '03',
							},
							success: (res) => {
								if (res.data.success) {
									this.set_NOTIFY({
										pt_callsys: {},
										iv_sys: {}
									})
									uni.showToast({
										title: '取消成功!',
										duration: 1000,
										icon: "success", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
									});
								}
							}
						});
					}

				} catch (e) {

				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.u-button {
		border-radius: 0 0 6rpx 6rpx;
		width: 100% !important;
		height: 70rpx !important;
	}

	.notice_bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 110rpx;
		z-index: 888;
		border-radius: 8rpx;
		margin: 0rpx -34rpx 0 -26rpx;
		padding: 10rpx;

		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px #E1E1E1;

		.bar-swiper {
			font-size: 38rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
			flex: 1;
			height: 160rpx;
		}

		.swiper-item {
			// margin-top: -20px;
			// display: flex;
			position: relative;
			width: 100%;
			height: 100%;
			background: linear-gradient(270deg, #FF9494 0%, #F7FBFF 100%);
			border-radius: 6px 6px 0px 0px;
			align-items: center;
			overflow: hidden;
		}

		.bottom-text {
			font-size: 36rpx;
			margin-left: 42rpx;

			text {
				margin-left: 26rpx;
				font-size: 28rpx;
				color: #5976BB;
			}
		}

		.sys_img {
			right: 12rpx;
			top: -12rpx;
			position: absolute;
			margin-top: 20rpx;
			float: right;
		}

		.item_box {
			margin-top: 30rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			word-break: break-all;
			/* break-all(允许在单词内换行。) */
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			// display: -webkit-box;
			/** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical;
			/** 设置或检索伸缩盒对象的子元素的排列方式 **/
			-webkit-line-clamp: 1;
			/** 显示的行数 **/
		}



	}
</style>
